<template>
	<view class="home-page">
		<view class="banner-swiper">
			<image v-if="bannerList.length === 1" mode="widthFix" :src="bannerList[0]" class="single-banner"
				@click="onToSurvey" @load="onBannerLoad" />
			<u-swiper v-else circular duration="1000" interval="5000" :height="bannerHeight" :list="bannerList"
				img-mode="widthFix" indicator-active-color="#78ffe6" @click="onToSurvey" />

			<view v-if="bannerBtnText" class="survey-btn" @click="onToSurvey">{{ bannerBtnText }}</view>
		</view>
		<view class="banner-swiper__placeholder" :style="{height: `${placeholderHeight}px`}" />
		<view class="main-container">
			<HomeModule />

			<view v-if="swiperList.length" class="swiper-wrap">
				<u-swiper circular indicator radius="8" height="194" duration="1000" interval="5000" next-margin="50"
					key-name="imageUrl" :list="swiperList" indicator-mode="dot" indicator-active-color="#78ffe6"
					@click="onSwiperClick" />
			</view>
			<HomeStep />

			<view v-if="swiperList2.length" class="swiper2-wrap">
				<u-swiper circular indicator radius="0" height="194" duration="1000" interval="5000" key-name="imageUrl"
					:list="swiperList2" indicator-mode="dot" indicator-active-color="#78ffe6" @click="onSwiperClick" />
			</view>
		</view>

		<clock-in-tip-popup ref="tipPopup" />
		<view v-if="!isLogin" class="login-mask">
			<get-phone @init="initCb" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getImg,
		getImgs,
		getCurrentPageConfigByName,
		execFn
	} from '../utils/index.js'
	import HomeModule from './components/home/Module.vue'
	import HomeStep from './components/home/Step.vue'
	import ClockInTipPopup from './components/clockIn/TipPopup.vue'
	import {
		wx_customer_click_add
	} from '@/api'
	import shareMixin from '../mixins/shareMixin.js'
	export default {
		name: 'Home',
		components: {
			HomeModule,
			HomeStep,
			ClockInTipPopup
		},
		mixins: [shareMixin],
		data() {
			return {
				showNavbar: false,
				bannerHeight: 510,
				placeholderHeight: 0,
				bannerList: [],
				bannerUrl: '',
				bannerBtnText: '',
				swiperList: [],
				swiperList2: [],
				q: null
			}
		},
		computed: {
			...mapState(['statusBarHeight', 'clockInRuleData', 'isLogin'])
		},
		onLoad(options) {
			if (options.q) {
				const q = decodeURIComponent(options.q)
				const match = q.match(/\/cd\/(\d+)/)
				const number = match ? match[1] : null
				this.q = number
				setTimeout(() => {
					this.goWebview()
				}, 1000)
			}
			// 新客邀请
			if (options.share_id) {
				wx_customer_click_add({
					share_id: parseInt(options.share_id)
				})
			}
			this.initPage()
		},
		methods: {
			...mapActions(['setAppDefaultInfo']),
			goWebview() {
				if (this.isLogin && this.q) {
					wx.navigateTo({
						url: `/pages/webView?src=zwcx&result=${this.q}`
					})
				}
			},
			initCb() {
				if (!this.clockInRuleData.is_enable) {
					this.$refs.tipPopup.show = true
				}
				setTimeout(this.goWebview, 1000)
			},
			initPage() {
				const _this = this
				getCurrentPageConfigByName('顶部背景').then(res => {
					// console.log('顶部背景--配置数据')
					// console.log(res)
					if (res) {
						const {
							bg_image,
							t_text1,
							url
						} = res
						const bannerImgUrls = getImgs(bg_image)
						_this.bannerList = bannerImgUrls
						_this.bannerBtnText = t_text1
						_this.bannerUrl = url
					}
				})
				getCurrentPageConfigByName('轮播1').then(res => {
					// console.log('轮播1--配置数据')
					// console.log(res)
					const {
						app_path_set_dt
					} = res
					_this.swiperList = app_path_set_dt.map(e => {
						e.imageUrl = getImg(e.image)
						return e
					})
				})
				getCurrentPageConfigByName('轮播2').then(res => {
					console.log('轮播2--配置数据')
					console.log(res)
					const {
						app_path_set_dt
					} = res
					_this.swiperList2 = app_path_set_dt.map(e => {
						e.imageUrl = getImg(e.image)
						return e
					})
				})
				getCurrentPageConfigByName('默认头像名称').then(res => {
					console.log('默认头像配置数据')
					console.log(res)
					const {
						t_text1,
						bg_image
					} = res
					_this.setAppDefaultInfo({
						name: t_text1,
						avatar: getImg(bg_image)
					})
				})
				setTimeout(() => {
					if (!this.clockInRuleData.is_enable) {
						if (this.isLogin) {
							this.$refs.tipPopup.show = true
						}
					}
				}, 2000)
			},
			onToSurvey() {
				if (this.bannerUrl) {
					execFn(this.bannerUrl)
				}
			},
			onSwiperClick(index) {
				const url = this.swiperList[index].url
				url && execFn(url)
			},
			onTest() {
				this.$utils.navigateToPage('/pagesTopic/detail')
			},

			onBannerLoad(e) {
				const _this = this
				const {
					width,
					height
				} = e.detail
				uni.getSystemInfo({
					success: (res) => {
						const {
							windowWidth
						} = res
						_this.placeholderHeight = windowWidth / width * height
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.home-page {
		position: relative;
		height: calc(100vh - 100rpx);

		.banner-swiper {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.single-banner {
				width: 100%;
			}

			.survey-btn {
				width: 562rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 15rpx;
				background-color: $theme-color;
				font-size: 30rpx;
				font-weight: bolder;
				text-align: center;
				position: absolute;
				bottom: 116rpx;
				left: 50%;
				transform: translateX(-50%);

				&:active {
					opacity: 0.9;
				}
			}
		}

		.main-container {
			position: relative;
			top: -76rpx;

			.swiper-wrap {
				padding-left: 20rpx;

				::v-deep.u-swiper__wrapper__item {
					box-sizing: border-box;
					padding-right: 30rpx;
				}
			}

			.swiper2-wrap {
				padding: 50rpx 0 20rpx;
			}
		}
	}

	::v-deep.navbar-show .u-navbar__content__title {
		color: #303133;
	}

	::v-deep.navbar-hidden .u-navbar__content__title {
		color: transparent;
	}
</style>